<template>
  <!-- 弹窗组件 -->
  <!-- 注册@close="btnCancel"调用取消的功能 -->
  <el-dialog :title="showTitle" :visible="showDialog" @close="btnCancel">
    <!-- 表单组件 -->
    <!-- 点击确认按钮提交表单数据并且添加到组件中 -->
    <el-form
      label-width="120px"
      :model="formData"
      :rules="rules"
      ref="deptForm"
    >
      <!-- 表单单个组件 -->
      <el-form-item label="部门名称" prop="name">
        <el-input
          style="width: 80%"
          placeholder="输入字符1-50字"
          v-model="formData.name"
        />
      </el-form-item>
      <!-- 
   -->
      <el-form-item label="部门编码" prop="code">
        <el-input
          style="width: 80%"
          placeholder="输入字符1-50字"
          v-model="formData.code"
        />
      </el-form-item>
      <!-- 
   -->
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          style="width: 50%"
          placeholder="请选择"
          v-model="formData.manager"
          @focus="getEmployeeSimple"
        >
          <el-option
            v-for="item in peoples"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 
   -->
      <el-form-item label="部门介绍">
        <el-input
          style="width: 80%"
          placeholder="输入字符1-300字"
          type="textarea"
          :rows="3"
          v-model="formData.introduce"
          prop="introduce"
        />
      </el-form-item>
      <!-- 
   -->
    </el-form>
    <!-- 插槽按钮 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col>
        <!-- 取消的点击事件清空表单的效验和关闭弹窗 -->
        <el-button size="small" @click="btnCancel">取消</el-button>
        <el-button size="small" type="primary" @click="filesubmit"
          >确认</el-button
        >
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
// 树状图的所有数据获取部门详情的页面
import { getDepartments,addDepartments,getDepartDetail,updateDepartments} from "@/api/departments";
// 引入员工的简单列表
import { getEmployeeSimple } from "@/api/employees";

export default {
  // 需要传入一个props变量来控制 显示或者隐藏
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    treeNode: {
      type: Object,
      default: null,
    },
  },
  // 计算属性
  computed:{
showTitle(){
        //只有编辑的时候formData才有数据
      return this.formData.id ? '编辑部门' : '新增子部门'
}
  },
  data() {
    // 创建自定义的文本效验
    const checkNameRepeat = async (rule, value, callback) => {
      // 调用全部数据进行筛选是否有子节点是否重复如果重复那么就抛出异常
      const { depts } = await getDepartments();
      // 
      let isRepeat =false
      // 在这里判断是否有重复名称的文件名
      if(this.formData.id){
// 编辑排除自身得各项重复，item是父节点中的每一个子节点那么item.id!== this.formData.id排除掉点击编辑的节点并且是item.pid === this.treeNode.id同一节点下的字节点
    isRepeat = depts
        .filter((item) =>item.id!== this.formData.id &&item.pid === this.treeNode.id)
        .some((item) => item.name === value);
      }else{
  // 这是通过数组筛选的方式对所有属于指定节点的所有子元素进行的筛选并将所有相同的节点在次进行元素的对比如果名称相同那么就抛出异常
       isRepeat = depts
        .filter((item) => item.pid === this.treeNode.id)
        .some((item) => item.name === value);
      }
    
      // 判断是否存在相同的
      isRepeat ? callback(new Error(`已经存在${value}`)) : callback();
    };
    // 判断编码是否存在一样的
    const checkCodeRepeat = async (rule, value, callback) => {
      // 调用全部数据进行筛选是否有子节点是否重复如果重复那么就抛出异常
      const { depts } = await getDepartments();
      // 默认isRepeat=false
      let isRepeat = false
      if(this.formData.id){
 isRepeat = depts.some((item) =>item.id!== this.formData.id &&item.code === value && value);
      }else{
  // 这不是通过数组筛选的方式对所有编码进行筛选防止相通的编码出现同时编码也不能为空
       isRepeat = depts.some((item) => item.code === value && value);
      }
      // 判断是否有相通的有就抛异常
      isRepeat ? callback(new Error(`已经存在${value}编码`)) : callback();
    };
    return {
      // 文本框的内容
      formData: {
        name: "", // 部门名称
        code: "", // 部门编码
        manager: "", // 部门管理者
        introduce: "", // 部门介绍
      },
      rules: {
        name: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "最小字符数是1最大是50个字符",
            trigger: "blur",
          },
          {
            validator: checkNameRepeat,
            trigger: "blur",
          },
        ], // 部门名称
        code: [
          { required: true, message: "请输入部门编码", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "最小字符数是1最大是50个字符",
            trigger: "blur",
          },
          {
            validator: checkCodeRepeat,
            trigger: "blur",
          },
        ], // 部门编码
        manager: [
          { required: true, message: "请选择部门管理者", trigger: "blur" },
        ], // 部门管理者
        introduce: [
          { required: true, message: "请输入部门介绍", trigger: "blur" },
          {
            min: 1,
            max: 300,
            message: "最小字符数是1最大是300个字符",
            trigger: "blur",
          },
        ], // 部门介绍
      },
      // 创建一个接收员工信息的数组
      peoples: [],
    };
  },
  methods: {
    // 点击就获取员工的基本信息
    async getEmployeeSimple() {
      const res = await getEmployeeSimple();
      this.peoples = res;
    },
    // 创建点击提交表单信息到后台
    filesubmit() {
      // 获取dom元素然后获取表单数据
      this.$refs.deptForm.validate(async (ISOK) => {
        if (ISOK) {
          // 获取到数据后请求方法提交到后台
               /* 
        如果编辑的部门有id那么就是编辑如果没有id就是编辑因为添加表单信息时父节点的pid是子节点的id，如果字节点没有id那么说明是新增的文件如果有那就说明是要编辑的文件所以使用this.formData.id来判断是否是编辑的文件
        */
         if(this.formData.id){
// 如果是true说明是有id的编辑页面参数传入要修改的内容
await updateDepartments(this.formData)
       }else{
// 如果是fales说明是没有id的新增页面执行新增接口文档
     await addDepartments({
            ...this.formData,
            pid: this.treeNode.id,
          });
       }
     
        }
        // 提交完毕后通知父元素重新拉去数据
        //在 await addDepartments后边书写
        this.$emit("addDepts");
        // 清空所有的文本内容
        // 关闭页面// 子组件 update:固定写法 (update:props名称, 值)
        this.$emit("update:showDialog", false);
      });
    },
    /* 
    点击取消按钮清空重置表单的效验和文本内容
    */
    btnCancel() {
            // 重置数据  因为resetFields 只能重置 表单上的数据 非表单上的 比如 编辑中id 不能重置
      this.formData = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
      // 重置表单数据
       this.$refs.deptForm.resetFields()
      //  关闭弹窗页面
        this.$emit("update:showDialog", false);
    },
    /* 
    通过接口方法获取部门信息
    id是有其他文件传送过来的部门
    */
async getDepartDetail(id){
  //这里是将数据赋值给文本框
this.formData = await getDepartDetail(id)
   }
  },
};
</script>

<style>
</style>